<template>
  <div class="absolute edu-calendar">
    <uni-datetime-picker
        v-if="visible"
        @close="onClose"
        @change="dateChange"
        :type="type"
        ref="dateRef"
        v-model="dateValue"
        :start="minDate"
    >
      <text></text>
    </uni-datetime-picker>
  </div>
</template>

<script>
export default {
  methods: {
    open(v, options) {
      return new Promise(resolve => {
        if (v) this.dateValue = v
        if (!options) options = {
          type: 'date'
        }
        const {type, minDate} = options
        this.type = type || "date"
        this.minDate = minDate || ""
        this.visible = true
        this.resolveFunc = resolve
        this.$nextTick(() => {
          this.$refs.dateRef && this.$refs.dateRef.show()
        })
      })
    },
    onClose() {
      if (this.resolveFunc) {
        this.resolveFunc([true, null])
        this.resolveFunc = null
      }
      this.visible = false
    },
    dateChange(ev) {
      if (this.resolveFunc) {
        this.resolveFunc([null, ev])
        this.resolveFunc = null
      }
      setTimeout(() => {
        this.visible = false
      }, 300)
    },
  },
  computed: {},
  data() {
    return {
      dateValue: "",
      visible: false,
      type: "date",
      minDate: "",
    }
  }
}
</script>

<style lang="scss" scoped>
.edu-calendar {
  z-index: 9999999;
}
</style>
